<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery表单验证</title>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--验证表单的配置文件-->
		<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<!--验证表单方法的文件-->
		<script src="js/additional-methods.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//validate()验证所选的表单
				$("#myform2").validate({
					debug:true,//设置为调试模式，不发生错误的情况下表单不提交
					rules:{//rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。
						username:{
							required:true,
							rangelength:[6,12]
						},
						psw:{
							required:true,
							rangelength:[6,12]
						},
						psw2:{
							required:true,
							equalTo:'#psw'
						},
						hobby:{
							required:true,
						
						},
						semail:{
							required:true,
							email:true
						},
						simg:{
							required:true,
							extension:'gif|jpe?g|png'
						}
					},
//					messages:{//messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数
//						username:{
//							required:"请输入用户名",
//							rangelength:$.validator.format("用户名长度为：{0}-{1}个字符")
//						},
//						psw:{
//							required:"请输入密码",
//							rangelength:$.validator.format("密码长度为{0}-{1}个字符")
//						},
//						psw2:{
//							required:"请再次输入密码",
//							equalTo:"两次密码必须一致"
//						},
//						hobby:{
//							required:"请至少选择一项爱好"
//						},
//						semail:{
//							required:"请输入邮箱",
//							email:"请输入正确的邮箱格式"
//						},
//						simg:{
//							required:"请选择头像",
//							extension:"文件后缀名必须以jpg,jpeg,png,gif结尾"
//						}
//					}
				});
				$.validator.addMethod("isMobile", function(value, element) { 
					var length = value.length; 
					var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
					return this.optional(element) || (length == 11 && mobile.test(value)); 
				}, "请正确填写您的手机号码");
				$("#myform").validate({
					
					rules:{
						userName:{
							required:true,
							rangelength:[6,12]
						},
						pw:{
							required:true,
							rangelength:[6,12]
						},
						semail:{
							required:true,
							email:true
						},
						tel:{
							required:true,
							isMobile:["element"]
						},
						sex:{
							required:true
						},
						birthday:{
							required:true							
						},
						hobby:{
							required:true,
							minlength:"2"
						},
						tx:{
							extension:'jpg|jpeg|png|gif'
						},
						zwjs:{
							rangelength:[30,50]
						}
					},
					errorPlacement : function(error,element){
						if (element.is(":radio")) {
							error.appendTo(element.parent().next());
						}else if(element.is(":checkbox")){
							error.appendTo(element.parent().next());
						}
						else{
							error.appendTo(element.parent().next());
						}
					}
				});
			});
			
			
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com" method="post" id="myform">
			<table border="1px" cellspacing="0" cellpadding="0" align="center" width="800px" style="background-color: lightgray">
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="userName" id="userName" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pw" id="pw" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="email" name="semail" id="semail" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>联系方式：</td>
					<td><input type="text" name="tel" id="tel" value="" /></td>
					<td></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						男<input type="radio" name="sex" id="sex" value="" />
						女<input type="radio" name="sex" id="sex" value="" />
					</td>
					<td></td>
				</tr>
				<tr>
					<td>出生年月：</td>
					<td>
						<input type="text" name="birthday" id="birthday" value=""  onClick="WdatePicker()"/>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
						<input type="checkbox" name="hobby" id="hobby" value="" />读书
						<input type="checkbox" name="hobby" id="hobby" value="" />篮球
						<input type="checkbox" name="hobby" id="hobby" value="" />唱歌
						<input type="checkbox" name="hobby" id="hobby" value="" />旅游
					</td>
					<td></td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="file" name="tx" id="tx" value="" />
					</td>
					<td></td>
				</tr>
				<tr>
					<td>自我介绍：</td>
					<td>
						<textarea name="zwjs" rows="6" cols="60"></textarea>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan="3" align="center"><input type="submit" name="" id="" value="注册" /></td>
				</tr>
			</table>
			
		</form>
		<form action="https://www.baidu.com" method="post" id="myform2">
			用户名：<input type="text" name="username" /><br />
			密码：<input type="password" name="psw" id="psw"/><br />
			确认密码：<input type="password" name="psw2" /><br />
			爱好:
				看书<input type="checkbox"  name="hobby" value="" />
				旅游<input type="checkbox"  name="hobby" value="" />
				游泳<input type="checkbox"  name="hobby" value="" /><br />
			邮箱：<input type="text" name="semail"/><br />
			头像：<input type="file" name="simg" /><br />
			<input type="submit" value="提交" id="sub"/>
		</form>
	</body>
</html>
